<template>
  <div class="realizeBox">
    <div class="exchangeH flex f-s f18 c25">充值卡兑换</div>
    <div class="exchangeCBox">
      <input
        class="exchangeCInput f18 c3"
        type="text"
        placeholder="请输入充值卡兑换码进行充值"
      />
      <div class="exchangeCBtn flex">充值</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Exchange",
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
</style>

<style scoped>
.realizeBox {
  width: 100%;
}
.exchangeH {
  width: calc(100% - 2px);
  height: 56px;
  border: 1px solid #e9e9e9;
  text-indent: 20px;
}
.exchangeCBox {
  width: calc(100% - 2px);
  height: 566px;
  border: 1px solid #e9e9e9;
  border-top: none;
  position: relative;
}
.exchangeCInput {
  width: 475px;
  height: 53px;
  border: none;
  border: 1px solid #e9e9e9;
  text-indent: 20px;
  outline: none;
  position: absolute;
  top: 51px;
  left: 31px;
}
.exchangeCInput::placeholder {
  font-size: 18px;
  color: #999999;
}
.exchangeCBtn {
  width: 150px;
  height: 50px;
  font-size: 20px;
  color: #ffffff;
  background-color: #f08200;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 206px;
  left: 31px;
}
</style>
